import React from 'react';
import { useNavigate } from 'react-router-dom';
// import { NavLink } from 'react-router-dom';
import { Tabs } from 'antd-mobile';
import { useLocation } from 'react-router-dom';
import style from './index.module.css';

const Navbar = (props) => {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  return (
    <div className={style.tabs}>
      <Tabs
        activeKey={pathname}
        onChange={(key) => {
          navigate(key);
        }}>
        <Tabs.Tab
          title='正在热映'
          key='/film/nowPlaying'
        />
        <Tabs.Tab
          title='即将上映'
          key='/film/comingSoon'
        />
      </Tabs>
      {/* <ul className={style.navbar}>
        <li>
          <NavLink to="/film/nowPlaying">正在热映</NavLink>
        </li>
        <li>
          <NavLink to="/film/comingSoon">即将上映</NavLink>
        </li>
      </ul> */}
    </div>
  );
};

export default Navbar;
